<!--请假列表-->
<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item>差假管理</el-breadcrumb-item>
    <el-breadcrumb-item>请假记录</el-breadcrumb-item>
  </el-breadcrumb>
  <br>

  <el-row>
<!--    <el-col :span="4">
      <template>
        <el-select v-model="value" placeholder="请选择" style="width: 120px" >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
    </el-col>-->


    <el-col :span="4" style="padding-left: 5px;padding-top: 5px">
      <el-button icon="el-icon-message" size="small" type="success" @click="add()">请假申请</el-button>
    </el-col>
  </el-row>
  <br>
  <!--绑定json数据-->
  <el-table :data="list" style="width: 100%;">
    <el-table-column label="员工编号" width="100px">
      <template slot-scope="x">
        <span>{{x.row.staffId}}</span>
      </template>
    </el-table-column>

    <el-table-column label="员工姓名" width="100px">
      <template slot-scope="x">
        <span>{{x.row.staffName}}</span>
      </template>
    </el-table-column>

    <el-table-column label="员工部门" width="100px">
      <template slot-scope="x">
        <span>{{x.row.staffDepartment}}</span>
      </template>
    </el-table-column>

            <el-table-column label="类型" width="100px" v-if="false">
              <template slot-scope="x">
                <span >{{x.row.leaveType}}</span>
              </template>
            </el-table-column>

    <el-table-column label="请假时间" width="100px">
      <template slot-scope="x">
        <span>{{x.row.leaveTime}}</span>
      </template>
    </el-table-column>

    <el-table-column label="起始时间" width="100px">
      <template slot-scope="x">
        <span>{{x.row.leaveBeginTime}}</span>
      </template>
    </el-table-column>

    <el-table-column label="结束时间" width="100px">
      <template slot-scope="x">
        <span>{{x.row.leaveEndTime}}</span>
      </template>
    </el-table-column>

    <el-table-column label="请假理由" width="100px">
      <template slot-scope="x">
        <span>{{x.row.leaveReason}}</span>
      </template>
    </el-table-column>

    <el-table-column label="审核状态" width="100px">
      <template slot-scope="x">
        <el-tag type="success" effect="dark" v-if="x.row.auditState===1">已审核</el-tag>
        <el-tag type="danger" effect="dark" v-if="x.row.auditState===0">未审核</el-tag>
      </template>
    </el-table-column>

    <el-table-column label="审核结果" width="100px">
      <template slot-scope="x">
        <span>{{x.row.auditResult}}</span>
      </template>
    </el-table-column>

    <el-table-column label="审核意见" width="100px">
      <template slot-scope="x">
        <span>{{x.row.approverSuggestion}}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="280" align="center">
      <!-- slot-scope 插槽 -->
      <template slot-scope="x">
        <el-button type="success" :disabled="x.row.auditResult==='通过'"  icon="el-icon-edit" size="small"
                   @click="edit(x.$index,x.row)">修改</el-button>
        <el-button type="danger" :disabled="x.row.auditResult==='通过'" icon="el-icon-delete" size="small"
                   @click="del(x.$index,x.row)">撤销</el-button>
      </template>
    </el-table-column>
  </el-table>



  <div class="block">
    <!-- size-change 下来框选中触发的事件 -->
    <!-- current-change 选中当前页码触发的事件 -->
    <!-- current-page 当前页绑定的值-->
    <!-- page-size 每页显示条数数-->
    <!-- total 总条数 -->

    <el-pagination
      @size-change="selectRow"
      @current-change="currentPage"
      :current-page="leavePage.page"
      :page-sizes="[3, 5, 7, 10]"
      :page-size="leavePage.row"
      layout="total,sizes, prev, pager, next, jumper"
      :total="leavePage.total">
    </el-pagination>


    <!--对话框====================================-->
    <el-dialog :title="title" :visible="isShow" width="30%" :before-close="closeWin" center>
      <el-form label-width="80px">
        <el-form-item label="姓名">
          <el-col :span="20">
            <input v-model="leave.staffId"  type="hidden"></input>
            <el-input v-model="leave.staffName" ></el-input>
            <input v-model="leave.leaveType" type="hidden"></input>
          </el-col>
        </el-form-item>

        <el-form-item label="部门">
          <el-col :span="20">
            <el-select v-model="leave.staffDepartment" placeholder="请选择部门">
              <el-option
                v-for="x in option"
                :key="x.value"
                :label="x.label"
                :value="x.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>


        <el-form-item label="申请时间">
          <el-col :span="20">
            <el-date-picker
              v-model="leave.leaveTime"
              type="date"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期">
            </el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="起始时间">
          <el-col :span="20">
          <el-date-picker
            v-model="leave.leaveBeginTime"
            type="date"
            format="yyyy年MM月dd日"
            value-format="yyyy-MM-dd"
            placeholder="请选择日期">
          </el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="结束时间">
          <el-col :span="20">
            <el-date-picker
              v-model="leave.leaveEndTime"
              type="date"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期">
            </el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="申请理由">
          <el-col :span="20">
            <el-input v-model="leave.leaveReason"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item>

          <el-col :span="12">
            <el-button type="success" icon="el-icon-apple" @click="sure" round>确定</el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="success" @click="closeWin" round>取消</el-button>
          </el-col>

        </el-form-item>



      </el-form>
    </el-dialog>
  </div>
</div>
</template>

<script>
  import myUtile from "../../utile/myUtile";

  export default {
    name: "leave",
    data(){
      return{
        curId:"",
        list:[],
        isShow:false,
          option:[
            {label:"研发部门",value:"研发部门"},
            {label:"产品部门",value:"产品部门"},
            {label:"人事部门",value:"人事部门"},
            {label:"销售部门",value:"销售部门"},
          ],
        leave:{
          id:0,
          staffId:0,
          staffName:"",
          staffDepartment:"",
          leaveType:"请假",
          travelVehicle:"",
          prepaidExpenses:"",
          leaveTime:"",
          leaveBeginTime:"",
          leaveEndTime:"",
          leaveReason:"",
          auditState:"",
          approverSuggestion:"",
          auditResult:""
        },
       leavePage:{//分页对象
          page:1, //页码
          row:10,  //每页显示条数
          total:0  //总条数
        },
        title:"xxxx"

      }
    },
    methods: {
      /*新增方法====================================*/
      add: function () {

        this.isShow = true;
        this.title = "请假申请";
        //数据回显
        this.leave.staffId = this.curId;
        this.leave.staffName = sessionStorage.getItem("name");
        this.leave.staffDepartment = "";
        this.leave.leaveType = "请假";
        this.leave.travelVehicle = "";
        this.leave.prepaidExpenses = "";
        this.leave.leaveTime = "";
        this.leave.leaveBeginTime = "";
        this.leave.leaveEndTime = "";
        this.leave.leaveReason = "";
      },
      /*删除方法======================================*/
      del: function (index, x) {//撤销申请
        var self = this;
        this.$confirm("你确定要撤销申请吗？").then(function () {
          $.ajax({
            /*给出后端删除的路径*/
            url: myUtile.url + "/leaveTable/del",
            type: "get",
            data: {"id": x.id},
            dataType: "json",
            success: function (data) {
              self.$message(data.info);
              if (data.info == "撤销成功") {
                //刷新
                self.loadData();
              }
            }
          })
        }).catch(function () {
          self.$message("你已撤销申请")
        })
      },
      /*编辑方法========================================*/
      edit(index, x) {
        /*根据员工序号编辑(不是员工号)*/
        console.log(index);
        console.log(x);
        //显示对话框
        this.isShow = true;
        this.title = "修改";
        //数据回显
        this.leave.id=x.id;
        this.leave.staffId = x.staffId;
        this.leave.staffName = x.staffName;
        this.leave.staffDepartment = x.staffDepartment;
        this.leave.leaveType = x.leaveType;
        this.leave.travelVehicle = x.travelVehicle;
        this.leave.prepaidExpenses = x.prepaidExpenses;
        this.leave.leaveTime = x.leaveTime;
        this.leave.leaveBeginTime = x.leaveBeginTime;
        this.leave.leaveEndTime = x.leaveEndTime;
        this.leave.leaveReason = x.leaveReason;
      },
      sure() {
        const self = this;
        let url = "";
        if (this.title === "修改") {
          url = myUtile.url + "/leaveTable/update";
        } else {
          url = myUtile.url + "/leaveTable/add";
        }
        $.ajax({
          url: url,
          type: "get",
          data: self.leave,
          dataType: "json",
          success: function (data) {
            self.$message(data.info);
            if (data.info === "新增成功"||data.info==="修改成功") {
              self.isShow = false;
              //刷新
              self.loadData();
            }
          }, error: function (err) {
            console.log(err);
            self.$alert(err.responseText);
          }
        })
      },
      loadData() { //加载列表
        //this.isShow = false;
        const self = this;
       var staffId= sessionStorage.getItem("staffId");

        $.ajax({
          url: myUtile.url + "/leaveTable/selectByIdLeave?staffId="+staffId+"&leaveType=请假",
          type: "get",
          data: self.leavePage,
          dataType: "json",
          success: function (data) {
            console.log(data.list);
            console.log(staffId);
            self.list = data.list;
            //总条数
            self.leavePage.total = data.total;
          }, error: function (err) {
            console.log(err);
            self.$alert(err.responseText);
          }
        })
      },
      closeWin() {
        this.isShow = false;
      },
       selectRow(row){//分页下拉框触发 的事件
        console.log("row="+row)
        this.leavePage.row=row;
        //刷新
        this.loadData();
      },
      currentPage(curPage){//页码触发事件
        this.leavePage.page=curPage;
        //刷新
        this.loadData();
      }
    },
   mounted(){
      this.loadData();
     this.curName = sessionStorage.getItem("userName");
     this.userId = sessionStorage.getItem("userId")
     this.curId = sessionStorage.getItem("staffId")

    }
  }
</script>

<style scoped>

</style>
